<template>
  <div class="related-activities">
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">相关活动</h1>
        <p class="page-subtitle">展会期间丰富多彩的配套活动</p>
      </div>
    </div>
    <div class="container">
      <section class="activities-section">
        <h2 class="section-title">相关活动</h2>
        <div class="activities-grid">
          <div class="activity-item" v-for="activity in relatedActivities" :key="activity.id">
            <div class="activity-image">
              <img :src="activity.image" :alt="activity.title">
            </div>
            <div class="activity-content">
              <h3>{{ activity.title }}</h3>
              <p>{{ activity.description }}</p>
              <div class="activity-details">
                <span class="activity-time">{{ activity.time }}</span>
                <span class="activity-location">{{ activity.location }}</span>
              </div>
              <el-button type="primary" @click="registerActivity(activity)">报名参加</el-button>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'RelatedActivities',
  setup() {
    // 相关活动数据
    const relatedActivities = ref([
      {
        id: 1,
        title: '展商交流会',
        description: '为展商提供交流平台，分享行业经验和合作机会',
        image: 'https://images.unsplash.com/photo-1515187029135-18ee286d815b?w=400&h=300&fit=crop',
        time: '2025年3月15日 14:00-16:00',
        location: '主会场A厅'
      },
      {
        id: 2,
        title: '产品发布会',
        description: '展商新品发布和技术展示活动',
        image: 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=400&h=300&fit=crop',
        time: '2025年3月16日 10:00-12:00',
        location: '主会场B厅'
      },
      {
        id: 3,
        title: '商务对接会',
        description: '精准匹配展商与专业观众的商务需求',
        image: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=300&fit=crop',
        time: '2025年3月17日 09:00-17:00',
        location: '商务洽谈区'
      },
      {
        id: 4,
        title: '技术研讨会',
        description: '行业专家分享最新技术趋势和发展方向',
        image: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=300&fit=crop',
        time: '2025年3月18日 13:00-15:00',
        location: '会议中心'
      }
    ])

    // 报名参加活动
    const registerActivity = (activity) => {
      console.log('报名参加活动:', activity.title)
      ElMessage.success(`已报名参加 ${activity.title}`)
      // 这里可以实现实际的报名逻辑
    }

    return {
      relatedActivities,
      registerActivity
    }
  }
}
</script>

<style scoped>
.related-activities {
  min-height: 100vh;
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.activities-section {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  margin: 2rem 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: center;
}

.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.activity-item {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.activity-item:hover {
  transform: translateY(-5px);
}

.activity-image {
  height: 200px;
  overflow: hidden;
}

.activity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-content {
  padding: 1.5rem;
}

.activity-content h3 {
  font-size: 1.3rem;
  color: #320063;
  margin-bottom: 1rem;
  font-weight: 600;
}

.activity-content p {
  color: #666;
  line-height: 1.6;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.activity-details {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.activity-time,
.activity-location {
  color: #320063;
  font-weight: 600;
}

.activity-time::before {
  content: '🕒 ';
}

.activity-location::before {
  content: '📍 ';
}

.el-button {
  background: linear-gradient(135deg, #320063 0%, #667eea 100%);
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: transform 0.3s ease;
}

.el-button:hover {
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .activities-section {
    padding: 2rem;
    margin: 1rem 0;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .activities-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .page-subtitle {
    font-size: 1rem;
  }
}
</style>